<template>
	<el-row class="Row">
		<el-input placeholder="请输入评论人" v-model="userName"></el-input>
		<el-input placeholder="请输入商品信息" v-model="wareName"></el-input>
		<el-input placeholder="请输入评论时" v-model="opinionTime"></el-input>
		<el-input placeholder="请输入订单号" v-model="ordersId"></el-input>
		<el-button class="searchBtn" type='info' :icon="Search" @click="search">搜索</el-button>
	</el-row>
	<el-table :data="newRes">
		<el-table-column label="评论人" prop="userName" align="center"></el-table-column>
		<el-table-column label="商品信息" prop="wareName" align="center"></el-table-column>
		<el-table-column label="评论时间" prop="opinionTime" align="center"></el-table-column>
		<el-table-column label="订单号" prop="opinionId" align="center"></el-table-column>
		<el-table-column class="userName" label="评论内容" align="center">
			<template #default="scope">
				<span class="feeds" @click="userDetail(scope.row)">{{scope.row.opinionContent}}</span>
			</template>
			<!-- <template #default="scope">
				<a href="../commentContent" v-for="x in newRes " @click="userDetail(scope.row)">{{x.opinionContent}}</a>
			</template> -->
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev,pager,next"
		:page-size="pageSize"
		:page-count="pageCount"
		v-model:current-page="pageIndex"
		@current-change="changePage"
	></el-pagination>
</template>
<script setup lang="ts">
	import {Search,ArrowDown} from '@element-plus/icons-vue'
	import {getAppraise,searchAppraise} from "../api/lqy/index"
	import { onMounted, ref } from 'vue'
	import { useRouter ,useRoute} from 'vue-router';
	
	let pageIndex=ref(1)
	let pageSize=ref(5)
	let pageCount=ref(1)
	let newRes=ref([])
	let userName=ref() //评论人
	let wareName=ref() //商品名称
	let opinionTime=ref() //评论时间
	let ordersId=ref() //订单号
	const router=useRouter()
	//获取评价数据
	const Appraise =async()=>{
		let res = await getAppraise({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value
		})
		console.log(res.opinions)
		// newRes.value=res.opinions
		Object.assign(newRes.value,res.opinions)
		console.log(newRes.value)
	}
		Appraise()
	//搜索
	const search = async()=>{
		let res = await searchAppraise({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value,
			userName:userName.value,
			wareName:wareName.value,
			opinionTime:opinionTime.value,
			ordersId:ordersId.value,
		})
		newRes.value=res.opinion
		console.log(newRes.value)
	}
	//存储本地信息
	const userDetail = (v=>{
		sessionStorage.setItem('user',JSON.stringify(v))
		router.push("../commentContent")
	})
	const changePage = (page) => {
		pageIndex.value = page;
		Appraise()	
	}
</script>

<style scoped lang="less">
	.Row .el-input{
		width: 15%;
		margin-right: 20px;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.feeds{
		text-decoration: underline;
		cursor: pointer;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	:deep(.el-table tr){
		height: 80px;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	.el-pagination{
	        --el-pagination-bg-color:none;
	        --el-pagination-button-disabled-bg-color:none;
	        justify-content: center;
	}
</style>